<template>
	<div class="crowdfunding">
		<header class="index-top layout bg-white full-width">
			<div class="site">
				<!-- <span class="fs32 block bg-de" style='width:20px;height:20px;'></span> -->
				<img class="" src="../../assets/logo.png" class="block" alt="">
				<!-- <i class="iconfont icon-xia fs24rem white"></i> -->
			</div>
			<div class="search-mask" @click="toSearch"></div>
			<search-bar class="flex_1" :autofocused="false"></search-bar>
			<inform :img='img_url'></inform>
		</header>
		<section class="crowdfunding-content">
			<van-tabs swipeable>
				<van-tab v-for="(item,index) in tag_data" :key="item.category_id">
					<div slot="title" class='ellipsis' @click="loadInitData(item)">{{ item.category_name }}</div>
					<div class="subscript bg-white align-center pos-fix">
						<van-icon name="icon-bottom-arrow" class="c333"  @click="show_nav = true"/>
					</div>
				   	<template v-if="index == 0">
					   	<!-- 轮播图 -->
					    <div class="index-banner"> 
							<swiper :data="banner_data" img-key="img_path"></swiper>
						</div>
						<!-- 新品首发 -->
						<div class="new-product" v-for="items in data">
							<router-link tag="h3" :to="'/detail/recommend-detail?id='+ items.id" class="align-center fs16 c333 pt20 pb5">{{ items.name }}<van-icon name="youjiantou1" class="ml5 fs16 subject" /></router-link>
							<ul class="shop-list layout flex-w w92 auto mb25">
								<router-link tag="li" :to="'/detail?id='+item.crow_id" class="w48 mt15" v-for="(item,index) in items.goods" :key="index">
									<img class="responsive-img img-bg" style="height:9rem;" :src="item.img" alt="">
									<p class='mt15 ellipsis c333 fs14'>{{ item.goods_name }}</p>
									<p class="mt5 ellipsis c666 fs12">{{ item.introduction }}</p>
									<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
									<div class="layout">
										<p><span class="fs12 subject">￥</span><strong class="fs18 subject">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
										<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
									</div>
								</router-link>
							</ul>
							<swiper :data="items.adv" img-key="pic"></swiper>
						</div>
						<!-- 筛选 -->
						<div class="screen">
							<van-tabs>
								<van-tab v-for="(i,index) in screen_title" :key="index" v-if="i.sort != 0">
									<div slot="title" class='ellipsis' @click="loadInitScreenData(i)">{{ i.name }}</div>
									<ul class="w92 auto mb15">
										<router-link tag="li" :to="'/detail?id=' + item.crow_id" class="layout-juscon mt15" v-for="(item,index) in screen_data.goods" :key="index">
											<img :src="item.img" class="img-bg" alt="" style="width:7.5rem;height:6.5rem;">
											<div class="flex_1 ml15">
												<p class="fs14 c333 bold mb5">{{ item.goods_name }}</p>
												<span class="fs12 c666">{{ item.introduction }}</span>
												<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
												<div class="layout">
													<p><span class="fs12 subject">￥</span><strong class="fs18 subject">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
													<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
												</div>
											</div>
										</router-link>
									</ul>
									<swiper :data="adv_data" v-if='adv_data' img-key="pic"></swiper>
								</van-tab>
							</van-tabs>
						</div> 
						<!-- 品牌专区 -->
						<div class="trademark pb10"> 
							<router-link tag="h3" to="/brand-list" class="align-center fs16 c333 pt20 pb5">品牌专区<van-icon name="youjiantou1" class="ml5 fs16 subject" /></router-link>
							<ul class="row w92">
								<router-link tag="li" :to="'/detail/brand?brand_id='+ item.brand_id" class="col s4 pl10 pr10 mt15 align-center" v-for="(item,index) in brand_data" :key="index">
									<img :src="item.brand_pic" alt="" class="responsive-img img-bg">
									<p class="fs12 c666 mt10">{{ item.brand_name }}</p>
								</router-link>
							</ul>
						</div>
				   	</template>
				   	<template v-else>
				   		<nav class="nav border-b20">
							<ul class='row pb20'>
								<router-link tag="li" :to="'/detail/nav-detail' + item.category_pic" class="mt20 fs14 align-center col s2 pt40" :style="{ backgroundImage:'url('+ item.category_pic +')',width:'20%'}" v-for="(item,index) in nav_data" :key="index">
						        	{{ item.category_name }} 
						        </router-link>
							</ul>
						</nav>
						<!-- 筛选 -->
						<div class="screen">
							<van-tabs swipeable>
								<van-tab  v-for="(i,index) in screen_title" :key="index">
									<div slot="title" class='ellipsis' @click="loadInitScreenData(i)">{{ i.name }}</div>
									<ul class="w92 auto mb15">
										<li class="layout-juscon mt15" v-for="item in screen_calssity_data.list">
											<img :src="item.img" class="img-bg" alt="" style="width:7.5rem;height:6.5rem;">
											<div class="flex_1 ml15">
												<p class="fs14 c333 bold mb5">{{ item.goods_name }}</p>
												<span class="fs12 c666">{{ item.introduction }}</span>
												<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
												<div class="layout">
													<p><span class="fs12 subject">￥</span><strong class="fs18 subject">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
													<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
												</div>
											</div>
										</li>
									</ul>
								</van-tab>
							</van-tabs>
						</div>
				   	</template>
				</van-tab>
			</van-tabs>
			<div class="pos-fix full-width full-height" style="background:rgba(0,0,0,.8);top:6%;z-index:999;" v-if="show_nav">	
				<div class="bg-white pl15 pr15">
					<div class="layout pt15">
						<h3>全部分类</h3>
						<van-icon name="shangjiantou" class="fs16" @click="show_nav = false"/>
					</div>
					<ul class="pb30 row">
						<li class="align-center col s3" v-for="item in tag_data" @click='loadInitData(item)'>
							<p class="border auto radius mt15 pt5 pb5  fs12 c333" style="width:75px" :class="{ on : active == item.category_id }" >{{ item.category_name }}</p>
						</li>
					</ul>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
import { getBanner, getAdv } from '@/api';
import Swiper from '@/components/Swiper';
import SearchBar from '@/components/Search-bar';
import Inform from "@/components/Inform";
import { Tab, Tabs, Progress } from 'vant';
	export default{
		components: {
			Swiper,
			SearchBar,
			Inform,
			Tab,
			Tabs,
			Progress
		},
		data()
		{
			return{         
				active       			: -1,
				// screen_active           : 0,
				type 		   			: -1,
				sort           			: 3,
				sort_classity			: 0,
				show_nav       			: false,
				data           			: [],
				banner_data    			: [],
				adv_data                : [],
				tag_data       			: [],
				nav_data       			: [],
				screen_data	   			: [],
				screen_calssity_data 	: [],
				brand_data    			: [],
				screen_title  			: [{name:'综合排序',sort:0},{name:'即将结束',sort:3},{name:'金额最多',sort:1},{name:'人数最多',sort:4}],
				img_url       			: require('../../assets/icon-message.png'),
				bg_img        			: require("../../assets/nav_img.png"),
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			// 获取首页数据
			loadData()
			{
				this.loadNavData();
				this.loadBannerData();
				this.loadScreenData();
				this.loadAdvData();
				this.$http.get('/home/module').then( res=> {
					this.data = res.data;
				})
				this.$http.get('/brand/list',{ params : { type : 1 }}).then( res=> {
					this.brand_data = res.data;
				})
			},
			// 获取导航栏
			loadNavData()
			{
				this.$http.get('category/tab').then( res => {
					this.tag_data = res.data
				}) 
			},
			// 获取banner图
			loadBannerData()
			{
				getBanner(this.type).then( res =>{
					this.banner_data = res.data
				})
			},
			loadAdvData()
			{
				getAdv(0).then(res => {
					this.adv_data = res.data;
				})
			},
			// 获取首页筛选
			loadScreenData()
			{
				let params = {
					id : 2,
					sort : this.sort,
				}
				this.$http.get('/goods/special',{ params : params }).then( res=> {
					this.screen_data = res.data
				})
			},
			// 分类下的筛选
			loadScreenClassityData()
			{
				let params = {
					id : this.type,
					sort : this.sort_classity
				}
				this.$http.get('/category/goods',{ params: params }).then( res => {
					this.screen_calssity_data = res.data
				})
			},
			// 分类下导航栏
			loadClassityNavData()
			{
				this.$http.get('/category/list',{ params : { id : this.type } }).then( res=> {
					this.nav_data = res.data
				})
			},
			// 筛选切换
			loadInitScreenData(item)
			{
				this.sort = item.sort;
				this.sort_classity = item.sort;
				this.screen_data = [];
				this.screen_calssity_data = [];
				if( this.type == -1 )
					this.loadScreenData();
				else
					this.loadScreenClassityData();
			},
			// 切换分类
			loadInitData(item)
			{
				this.type = item.category_id;
				this.banner_data = [];
				this.sort = 0;
				this.loadBannerData();
				this.loadScreenClassityData();
				this.loadClassityNavData();
			},
			toSearch()
			{
				this.$router.push('/search')
			},
		}
	}
</script>

<style lang="less" >
	.crowdfunding{
		.index-top
		{
			position: fixed;
			top: 0;
			left: 0;
			padding: 0 .75rem;
			z-index: 99;
		}
		.crowdfunding-content{
			padding-top:44px;

		}
		.index-banner{
			.van-swipe-item{
				img{
					height: 10rem;
				}
			}
		}
		.new-product{
			.van-swipe-item{
				img{
					height: 5rem;
				}
			}
		}
		.screen{
			.van-tabs__wrap{
				z-index: 88;
			}
			.van-swipe-item{
				img{
					height: 5rem;
				}
			}
		}
		.search-mask{
			height: 30px;
			width: 68%;
			position: absolute;			
			left:19%;
			z-index:2;
		}
		.nav{
			ul{
				li{
					display: block;
			        background-position: top center;
			        background-size: 41px 41px;
			        background-repeat: no-repeat;
				}
			}
		}
		.subscript{
			top: 44px;
			right:0;
			height: 44px;
			line-height: 44px;
			z-index:100;
			width: 10%;
		}
		.on{
		    color: #ea2000;
		    border-color: #ea2000;
		}


		.van-tabs__wrap--scrollable{
			width: 90%;
			border-bottom:1px solid #eee;
			border-right: 1px solid #eee;
			.van-tab{
				flex: 0 0 16%;
			}
			.van-tab--disabled{
				flex: 0 0 13%;
			}
		} 
		.van-hairline--top-bottom::after{
			border-width:inherit;
		}
		.van-tabs__wrap{
			top: 44px;
			position: fixed;
		}
		.screen{
			.van-tabs__wrap{
				top:0;
				position: absolute;
			}
		}
	}
</style>